<template>
    <div class="app" style="position: relative;">
        <div class="alert alert-success" style="position: absolute;z-index:5;top:-75px" v-show="flag == 1">
            <svg xmlns="http://www.w3.org/2000/svg" class="stroke-current shrink-0 h-6 w-6" fill="none" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                    d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z" />
            </svg>
            <span>表白卡发布成功！</span>
        </div>

        <div class="alert alert-error" style="position: absolute;z-index:5;top:-75px" v-show="flag == 2">
            <svg xmlns="http://www.w3.org/2000/svg" class="stroke-current shrink-0 h-6 w-6" fill="none" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                    d="M10 14l2-2m0 0l2-2m-2 2l-2-2m2 2l2 2m7-2a9 9 0 11-18 0 9 9 0 0118 0z" />
            </svg>
            <span>表白对象和表白内容是必填的哦~</span>
        </div>

        <div class="alert alert-error" style="position: absolute;z-index:5;top:-75px" v-show="flag == 3">
            <svg xmlns="http://www.w3.org/2000/svg" class="stroke-current shrink-0 h-6 w-6" fill="none" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                    d="M10 14l2-2m0 0l2-2m-2 2l-2-2m2 2l2 2m7-2a9 9 0 11-18 0 9 9 0 0118 0z" />
            </svg>
            <span>表白卡发布失败...</span>
        </div>

        <div class="alert alert-error" style="position: absolute;z-index:5;top:-75px" v-show="flag == 4">
            <svg xmlns="http://www.w3.org/2000/svg" class="stroke-current shrink-0 h-6 w-6" fill="none" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                    d="M10 14l2-2m0 0l2-2m-2 2l-2-2m2 2l2 2m7-2a9 9 0 11-18 0 9 9 0 0118 0z" />
            </svg>
            <span>无法加载 web3、帐户或合同。检查控制台了解详情。</span>
        </div>





        <div class="logo" style="position:absolute;left:10px;top:30px;font-weight:bolder;font-size:18px">
            填写表白卡
        </div>

        <div class="box"
            style="margin: 0 auto;width:40%;height:550px;margin-top:100px;border-radius:5px;box-shadow: 0 0 2px rgba(0, 0, 0, 0.5);">
            <div class="title"
                style="text-align: center;line-height:70px;border:1px solid #fa5c7c !important;background-color: #fa5c7c !important;border-radius:5px;border-bottom-left-radius: 0px;border-bottom-right-radius: 0px;color:#fff;font-weight:bolder;font-size:20px">
                表白卡</div>

            <div class="content">
                <div class="to">
                    <div class="title"
                        style="font-size:15px;font-weight:bolder;margin-top:20px;margin-left:30px;color:#6E757C">To</div>
                    <div class="input" style="margin-top:20px;margin-left:40px">
                        <input type="text" placeholder="表白对象" class="input input-bordered input-success w-full max-w-xs"
                            v-model="to" />
                    </div>
                    <div class="title"
                        style="font-size:15px;font-weight:bolder;margin-top:20px;margin-left:30px;color:#6E757C">上传图片</div>
                        <div class="input" style="margin-top:20px;margin-left:40px">
                            <input type="text" placeholder="请输入图片网址" class="input input-bordered input-success w-full max-w-xs"
                                v-model="pic" />
                        </div>
                    <div class="title"
                        style="font-size:15px;font-weight:bolder;margin-top:20px;margin-left:30px;color:#6E757C">我想说</div>
                    <textarea style="margin-top:20px;margin-left:60px" placeholder="Bio"
                        class="textarea textarea-bordered textarea-lg w-full max-w-xs" v-model="body"></textarea>

                    <div class="submit" style="margin-left: 320px;margin-top:20px">
                        <button class="btn btn-info" @click="submitConfession">提交</button>
                    </div>
                </div>
            </div>
        </div>



    </div>
</template>

<script>
import { publishCard } from '../utils/LoveOnChain';


export default {
    name: "post",
    data() {
        return {
            to: '', //表白对象
            pic: '', //存储图片对象
            body: '',//表白内容
            flag: 0,
        }
    },
    methods: {
        async submitConfession() {
            try {
                const result = await publishCard(this.userId, this.to, this.body, this.pic);
                //定时操作三秒自动修改flag
                this.flag = result;
                setTimeout(() => {
                    this.flag = 0;
                }, 3000);
                console.log(result);
            } catch (error) {
                console.log(error);
            }
        },
    }

}
</script>

<style setup>
* {
    -webkit-user-select: none;
    /*webkit浏览器*/
    -khtml-user-select: none;
    /*早期浏览器*/
    -moz-user-select: none;
    /*火狐*/
    -ms-user-select: none;
    /*IE10*/
    user-select: none;
}

.app {
    top: 80px;
    width: 80%;
    float: right;
}
</style>